<template>
	<view class="container">
		<userinfo v-if="user_options.toLogin" id="user" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo"></userinfo>
		<villageChooseHouse :options="choose_options" @chooseHouseId="chooseHouseId"></villageChooseHouse>
		<uni-fab :content="fab_content" :pattern="fab_pattern" @trigger="trigger"></uni-fab>
		<view class="container-box">
			<!-- 动态列表 -->
			<view class="dynamic">
				<view class="info">
					<view class="info-box">
						<view class="info-icon1" v-if="listData && listData.aDetails && listData.aDetails.user && listData.aDetails.user.avatar">
							<image :src="listData.aDetails.user.avatar" class="info-img1"></image>
						</view>
						<view class="info-text">
							<view class="name" v-if="listData && listData.aDetails && listData.aDetails.user && listData.aDetails.user.nickname">{{listData.aDetails.user.nickname}}</view>
							<view class="time" v-if="listData && listData.aDetails && listData.aDetails.update_time">{{listData.aDetails.update_time}}</view>
						</view>
					</view>
					<!-- <view class="category">
						{{listData.index}}
					</view> -->
				</view>
				<view class="content" v-if="listData && listData.aDetails && listData.aDetails.aricle_title">
					{{listData.aDetails.aricle_title}}
				</view>
				<!-- 九张图 -->
				<view class="img-box" v-if="listData && listData.aDetails && listData.aDetails.aricle_imgs && listData.aDetails.aricle_imgs[0]"
				 :class="(listData.aDetails.img_num>0)?((listData.aDetails.img_num>3)?((listData.aDetails.img_num>6)?'img_box_9':'img_box_6'):'img_box_3'):'img_box_0'">
					<view :class="(listData.aDetails.img_num>1)?'bigimg_more':'bigimg'" v-for="(img, img_key) in listData.aDetails.aricle_imgs"
					 @click="previewimage(img_key)">
						<image :src="img.img_path" mode="widthFix" :class="(listData.aDetails.img_num>1)?'around-img_more':'around-img'"
						 v-if="img.img_path"></image>
					</view>
				</view>
				<view class="read-box">
					<view class="read-banner">
						<view class="read-address" v-if="listData && listData.aDetails && listData.aDetails.address">
							<span v-if="listData && listData.aDetails && listData.aDetails.address">{{listData.aDetails.address}}</span>
						</view>
						<view class="read-text" v-if="listData && listData.aDetails && listData.aDetails.browse_num && listData.aDetails.browse_num>0">
							浏览{{listData.aDetails.browse_num}}次
						</view>
					</view>
					<view class="icon-box">
						<view class="dianzan" v-show="showIcon" @click="changeIcon()">
							<image :src="listData.mezan==0? '../../../static/images/diazan.png' : '../../../static/images/dianzan1.png'"
							 class="dianzan-icon"></image>
						</view>
						<text style="color: #C9C9C7;font-size: 32rpx;margin-left: 10rpx;">{{numlist.aricle_praise_num}}</text>
						<view class="pinglun" @click="openPopup(listData.aricle_id)">
							<image src="../../../static/images/pinglun.png" class="pinglun-icon"></image>
						</view>
						<text style="color: #C9C9C7;font-size: 32rpx;margin-left: 10rpx;">{{numlist.aricle_comment_total}}</text>
					</view>
				</view>
				<!-- 分割线 -->
				<view class="cell"></view>
			</view>

			<!-- 点赞 -->
			<view class="dianzan-box" v-if="listData && listData.aDetails && listData.aDetails.aricle_praise_num > 0 && listData.aZanList && listData.aZanList[0]">
				<view class="info-box1">
					<view class="info-box2" v-for="(items,index) in listData.aZanList" :key="index">
						<view class="info-icon2" v-if="items.uid && items.uid.avatar">
							<image :src="items.uid.avatar" class="info-img2"></image>
						</view>
						<view class="info-name" v-if="items.uid && items.uid.nickname">{{items.uid.nickname}}</view>
					</view>
				</view>
			</view>
			<!-- 评论区 -->
			<div v-if="listData && listData.aComment && listData.aComment[0]" v-for="(item,index) in listData.aComment" :key="index"
			 @click="reply(item.comment_id,item.uid.nickname,item.uid)">
				<view class="comment-box">
					<view class="comment-icon" v-if="item.uid && item.uid.avatar">
						<image :src="item.uid.avatar" class="comment-img"></image>
					</view>
					<view class="comment-info">
						<view class="comment-name">
							<text v-if="item.uid && item.uid.nickname">
								{{item.uid.nickname}}
							</text>
							<text v-if="item.comment_fid_nickname">
								<text class='reply_tip'>回复</text>{{item.comment_fid_nickname}}
							</text>
						</view>
						<view class="comment-text" v-if="item.uid && item.comment_content">{{item.comment_content}}</view>
					</view>
				</view>
			</div>
			<view class="comment">
				<view @click="openPopup(listData.aricle_id)" class="conment-btn">评论</view>
			</view>
		</view>
		<!-- 发布 -->
		<!-- 	<navigator url="publish">
			<view class="publish">
				<image src="../../../static/images/fabu.png" class="publish-img"></image>
			</view>
		</navigator> -->
		<!-- 弹出层评论区 -->
		<view>
			<uni-popup ref="popup" type="top">
				<form action="" @submit="formSubmit" @reset="formReset">
					<textarea maxlength='500' v-model="content" value="" :placeholder="popup_placeholder" :focus="popup_focus" class="prpup-box" :show-confirm-bar="false"/>
					<button form-type="submit" class="btn">发送</button>
				</form>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import uniPopup from "../../../appComponent/uni/uni-popup/uni-popup.vue"
	var common = require('../../../utils/common.js');
	import uniFab from '../component/uni-fab/uni-fab.vue';
	var app = getApp();
	var _this;
	import villageChooseHouse from '../../../appComponent/villagePage/villageChooseHouse';
	const getArticleDetailds = () => {
		const res = uni.getStorageSync("village_key")
		_this.village_id = res.village_id;
		_this.pigcms_id = res.pigcms_id;
		_this.village_name = res.village_name;
		_this.village_logo = res.village_logo;
		var aricle_id = _this.aricle_id;
		var cat_id = _this.cat_id;
		common.post('HouseApi&a=web_bbs_aricele_details', {
			  village_id:_this.village_id,
			  aricle_id:aricle_id,
			  cat_id:cat_id,
			  }, data => {
				console.log("============")
				console.log(data)
				_this.listData = data;
				_this.numlist = data.aDetails;
				// #ifdef H5
					_this.setWxShare()
				// #endif
		});
	}
	const setMyHouseInfo = () => {
		var res = {
			village_id: _this.village_id,
			village_name: _this.village_name,
			pigcms_id: _this.pigcms_id,
			village_logo: _this.village_logo
		};
		uni.setStorageSync('village_key', res);
	};
	export default {
		data(){
			return {
				userInfo:{},
				numlist:{},
				user_options:{},
				choose_options: {},
				listData:{},
				showIcon:true,
				showNew:true,
				content: '',
				popup_focus: false,
				comment_id: 0,
				nickname: '',
				village_id:0,
				village_name:"",
				village_logo:"",
				pigcms_id:0,
				aricle_id: 0,
				cat_id: 0,
				popup_placeholder: '走心的评论更容易被看见哦~',
				fab_content: [],
				fab_pattern:{}
			};
		},
		filters: {
		    ellipsis (value) {
		      if (!value) return ''
		      return value
		    }
		  },
		onLoad: function (options) {
		  _this = this;
		  console.log("58282828282654654165146541",options)
		  _this.aricle_id = options.aricle_id;
		  _this.cat_id = options.cat_id;
		  common.setMainColor(_this, function(config) {
		  	_this.fab_pattern = {
		  		buttonColor: app.globalData.config.config.mobile_head_color
		  	}
		  	if (app.globalData.tabBar && app.globalData.tabBar.list) {
		  		_this.fab_content = app.globalData.tabBar.list;
		  	}
			
			common.getTxtKey('动态详情').then(key => {
			  uni.setNavigationBarTitle({
			    title: key
			  });
			}, () => {});
		  });
		  
		  if(options.village_id){
		  	common.post('HouseApi&a=search_village', {
		  		village_id: options.village_id
		  	}, data => {
		  		_this.village_logo = data.village_logo ? data.village_logo : data.wechat_share_img;
		  		_this.village_id = options.village_id;
		  		_this.village_name = data.village_name;
		  		
		  		var res = {
		  			village_id: _this.village_id,
		  			village_name: _this.village_name,
		  			village_logo: _this.village_logo
		  		};
				if(options.pigcms_id){
					res.pigcms_id = options.pigcms_id;
					_this.pigcms_id = options.pigcms_id;
				}
		  		uni.setStorageSync('village_key', res);
		  		
		  		getArticleDetailds()
		  	});
		  	return false;
		  }
		  
		  getArticleDetailds()
		},
		components: {
			uniPopup,
			villageChooseHouse,
			uniFab
		},
		methods: {
			setWxShare() {
				let pageLink = `${common.requestDomain}packapp/${common.wxapp_type}/pages/village/resident/detailds?aricle_id=${_this.aricle_id}&cat_id=${_this.cat_id}&village_id=${_this.village_id}`
				pageLink = common.addShareParam(pageLink)
				let shareWxLink = pageLink;
				var shareData = {
					title: "【" + _this.village_name + "】" + _this.listData.aDetails.aricle_title,
					desc: (_this.listData.aDetails.img && _this.listData.aDetails.img.length > 0 ? "【多图】" : "") + _this.listData.aDetails.aricle_title,
					sendFriendLink: shareWxLink,
					share_img: _this.village_logo
				}
				console.log('shareData', shareData);
				common.setWxShare(shareData)
			},
			previewimage(img_key) {
				var info = {};
				var current = 0;
				if (img_key>0) {
					current = img_key;
				}
				if (_this.listData && _this.listData.aDetails && _this.listData.aDetails.previewimage) {
					var urls = _this.listData.aDetails.previewimage
					console.log('urls', urls)
					uni.previewImage({
						current: current,
						urls: urls,
						success: function(res) {
							console.log('success', res)
						},
						fail: function(fail) {
							console.log('fail', fail)
						}
					})
				}
			},
			openPopup(aricle_id) {
				console.log('aricle_id', aricle_id);
				if(!app.globalData.is_login){
					//调用应用实例的方法获取全局数据
					uni.showModal({
						title: common.changeTxt('提示'),
						content: common.changeTxt('请先登录'),
						showCancel: false,
						confirmText: common.changeTxt('去登录'),
						success: function(res) {
							_this.user_options = {
								toLogin: true
							}
						}
					})
					_this.popup_placeholder = '走心的评论更容易被看见哦~';
					_this.$refs.popup.close();
					_this.popup_focus = false;
				}else{
					if(!_this.pigcms_id){
						_this.choose_options = {
							need_choose_house: true,
							village_id: _this.village_id,
							after_event: 'reply',
						}
					}else{
						_this.popup_placeholder = '走心的评论更容易被看见哦~';
						_this.showArticleReplyFunc();
					}
				}
			},
			// 回复
			reply(comment_id,nickname, user){
				console.log('app.globalData.userInfo', app.globalData.userInfo);
				if (app.globalData.userInfo && app.globalData.userInfo['uid'] == user['uid']) {
					return;
				}
				_this.comment_id = comment_id;
				_this.nickname = nickname;
				_this.popup_focus = false;
				_this.$refs.popup.open();
				var msg = '回复' + nickname;
				msg = msg + '：';
				_this.popup_placeholder = msg;
				_this.content = '';
				setTimeout(function(){
					_this.popup_focus = true;
				},500);
			},
			// 发送评论
			formSubmit(index) {
				var aricle_id = _this.listData.aricle_id;
				var content = _this.content;
				if (!content) {
					uni.showToast({
						title: `请填写评论`,
						icon: 'none'
					});
					return
				}
				console.log('content',content);
				var comment_id = 0;
				if(_this.comment_id && _this.comment_id>0) {
					comment_id = _this.comment_id;
				}
				common.post('HouseApi&a=bbs_comment', {
					village_id: _this.village_id,
					aricle_id: aricle_id,
					pigcms_id: _this.pigcms_id,
					comment_fid: comment_id,
					comment_content: content,
				}, data => {
					console.log("++++++++++++++++++", data);
					console.log(data)
					if (data && data.comment) {
						var aComment = _this.listData.aComment;
						var comment = data.comment;
						if (_this.comment_id>0) {
							comment.comment_fid_nickname = _this.nickname;
						}
						if (!aComment || !aComment[0]) {
							aComment = [];
						}
						aComment.push(comment);
						_this.listData.aComment = aComment;
					}
				});
				this.notedata = '';
				this.$refs.popup.close()
			},
			// 点赞
			changeIcon(index){
				var aricle_id = _this.listData.aricle_id;
				console.log(aricle_id)
				if (!app.globalData.is_login) {
				  //调用应用实例的方法获取全局数据
				  uni.showModal({
					title: common.changeTxt('提示'),
					content: common.changeTxt('请先登录'),
					showCancel: false,
					confirmText: common.changeTxt('去登录'),
					success: function(res) {
						_this.user_options = {
							toLogin: true,
							refuseIsShow: true,
							showCancel: false
						}
					}
				  })
				} else {
						if(!_this.pigcms_id){
							_this.choose_options = {
								need_choose_house: true,
								village_id: _this.village_id,
								after_event: 'upArticle',
							}
					}else{
						_this.upArticleFunc();
					}
				}
			},
			chooseHouseId(e) {
				console.log(e);
				if(e.pigcms_id){
					_this.pigcms_id = e.pigcms_id;
				}
				if(e.after_event == 'reply'){
					_this.showArticleReplyFunc();
				}else if(e.after_event == 'upArticle'){
					_this.upArticleFunc();
				}
			},
			showArticleReplyFunc:function(){
				_this.content = '';
				_this.popup_focus = false;
				_this.popup_placeholder = '走心的评论更容易被看见哦~';
				_this.$refs.popup.open();
				setTimeout(function(){
					_this.popup_focus = true;
				},500);
			},
			upArticleFunc:function(){
				var mezan = _this.listData.mezan;
				if( mezan == 0){
					mezan = 1;
					common.post('HouseApi&a=web_bbs_aricele_zan', {
						  aricle_id: _this.aricle_id,
						  mezan: mezan
					}, data => {
						if(data && data.aricle_praise){
							_this.listData.mezan = 1;
							var aZanList = _this.listData.aZanList;
							if (!aZanList || !aZanList[0]) {
								aZanList = [];
								aZanList.push(data.aricle_praise);
								_this.listData.aZanList = aZanList;
							} else {
								aZanList.unshift(data.aricle_praise);
								_this.listData.aZanList = aZanList;
							}
							console.log('aZanList1', _this.listData.aZanList)
							var aricle_praise_num = _this.listData.aDetails.aricle_praise_num;
							aricle_praise_num = parseInt(aricle_praise_num) + 1;
							_this.listData.aDetails.aricle_praise_num = aricle_praise_num;
							console.log('listData', _this.listData)
						}
					});
				}else{
					mezan = 0;
					common.post('HouseApi&a=web_bbs_aricele_zan', {
						  aricle_id:_this.aricle_id,
						  mezan: mezan
					}, data => {
						if(data && data.aricle_praise){
							_this.listData.mezan = 0;
							var aZanList = _this.listData.aZanList;
							var user = data.aricle_praise['uid'];
							var user = data.aricle_praise.uid
							for (var z_i  in aZanList) {
								if (aZanList[z_i] && user['uid'] == aZanList[z_i]['uid']['uid']) {
									aZanList.splice(z_i,1);
								}
							}
							_this.listData.aZanList = aZanList;
							var aricle_praise_num = _this.listData.aDetails.aricle_praise_num;
							aricle_praise_num = parseInt(aricle_praise_num) - 1;
							if (aricle_praise_num<0) {
								aricle_praise_num = 0;
							}
							_this.listData.aDetails.aricle_praise_num = aricle_praise_num;
						}
					});
				}
			},
			trigger(param) {
				var url = param.item.pagePath;
				var village_id = _this.village_id;
				var pigcms_id = _this.village_id
				if (village_id) {
					url = common.changeURLArg(url, 'village_id', village_id);
				}
				if (pigcms_id) {
					url = common.changeURLArg(url, 'pigcms_id', pigcms_id);
				}
				console.log('tabbar url', url);
				common.parseUrl(url, '', false, param.item.text);
			}
			}
		}
</script>

<style>
	page {
		background: #FFFFFF;
	}
	.container {
		margin: 0px;
		background: #FFFFFF;
		padding-top: 15rpx;
		padding-bottom: 140rpx;
	}

	.container-box {
		background: #FFFFFF;
		overflow: hidden;
	}
	.tips-box {
		background: #FFFFFF;
		overflow: hidden;
	}
	.tips {
		width: 326rpx;
		height: 72rpx;
		background: rgba(51, 51, 51, 1);
		border-radius: 10rpx;
		margin: 49rpx auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.info-icon {
		width: 56rpx;
		height: 56rpx;
		border-radius: 4rpx;
		margin-left: 7rpx;
	}

	.info-img {
		width: 100%;
		height: 100%;
	}

	.tips-text {
		margin: 0 auto;
	}

	.dynamic {
		padding: 30rpx 30rpx 0rpx 30rpx;
	}

	.info {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.info-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.info-icon1 {
		width: 78rpx;
		height: 78rpx;
		border-radius: 4rpx;
	}

	.info-img1 {
		width: 100%;
		height: 100%;
	}

	.info-text {
		padding-left: 15rpx;
	}

	.name {
		font-size: 30rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 44rpx;
	}

	.time {
		font-size: 24rpx;
		/* font-weight: 500; */
		color: rgba(51, 51, 51, 1);
		line-height: 44rpx;
		opacity: 0.3;
	}

	.category {
		width: 110rpx;
		height: 44rpx;
		border: 2rpx solid rgba(6, 193, 174, 1);
		border-radius: 22rpx;
		font-size: 22rpx;
		/* font-weight: 500; */
		color: rgba(6, 193, 174, 1);
		line-height: 46rpx;
		text-align: center;
	}

	.content {
		font-size: 32rpx;
		/* font-weight: 500; */
		color: rgba(51, 51, 51, 1);
		line-height: 44rpx;
		margin-top: 20rpx;
		text-align: justify;
	}
	/* .content::after {
		content: "查看更多";
		font-size: 28rpx;
		font-weight: 500;
		color: #007AFF;
		line-height: 44rpx;
		margin-top: 40rpx;
	} */
	.img-box {
		width: 100%;
		margin-top:10rpx;
	}

	.bigimg {
		margin-top: 17rpx;
		width: auto;
	}
	.bigimg_more {
		width: 32%;
		height: 230rpx;
		float: left;
		padding: 4rpx 4rpx 0;
		line-height: 1;
	}

	.around-img {
		height: 100%;
	}
	.around-img_more {
		width: 100%;
		height: 100%;
	}

	.read-box {
		clear: both;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 10rpx;
		align-items: flex-end;
	}
	.read-banner {
		display: flex;
		flex-direction: column;
		
	}
	.read-address {
		/* transform: scale(0.8); */
		font-size: 24rpx;
		/* font-weight: 500; */
		/* color: rgba(153, 153, 153, 1); */
		color: #616879;
		line-height: 44rpx;
	}
	/* .read-address::before {
		content: "";
		width: 30rpx;
		height: 30rpx;
		background: url(../../../static/images/dingwei.png) no-repeat center;
		background-size: 29rpx;
		margin-left: 16rpx;
		margin-top: 8rpx;
		position: absolute;
		left: 0;
	} */
	.read-text {
		font-size: 24rpx;
		/* font-weight: 500; */
		color: rgba(153, 153, 153, 1);
		line-height: 44rpx;
		margin-top: 4rpx;
	}

	.icon-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-bottom: 3px;
	}

	.dianzan,
	.dianzan1,
	.pinglun {
		width: 36rpx;
		height: 36rpx;
		margin-left: 30rpx;
	}

	.dianzan1 {
		margin-left: 0rpx;
	}

	.dianzan-icon,
	.dianzan-icon1,
	.pinglun-icon {
		width: 100%;
		height: 100%;
	}

	.cell {
		width: 700rpx;
		height: 1rpx;
		background: rgba(0, 0, 0, 1);
		opacity: 0.05;
		margin-top: 30rpx;
	}

	.dianzan-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 15rpx;
	}
	
	.info-box1 {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: center;
		margin: 0rpx 15rpx;
	}
	
	.info-box1::before {
		content: "";
		width: 30rpx;
		height: 30rpx;
		background: url(../../../static/images/dianzan1.png) no-repeat center;
		background-size: 29rpx;
		margin-left: 15rpx;
	}
	
	.info-box2 {
		display: flex;
		flex-direction: row;
		margin-left: 15rpx;
	}
	
	.info-box2:first-child {
		margin-left: 15rpx;
	}

	/* .info-box2:last-child::after {
		content: "等15个人觉得很赞";
		font-size: 20rpx;
		font-weight: 500;
		color: rgba(128, 128, 128, 1);
		line-height: 44rpx;
	} */
	.text-after {
		font-size: 20rpx;
		/* font-weight: 500; */
		color: rgba(128, 128, 128, 1);
		line-height: 44rpx;
		margin-left: 15rpx;
	}
	.info-icon2 {
		width: 41rpx;
		height: 41rpx;
	}
	
	.info-img2 {
		width: 100%;
		height: 100%;
	
	}
	
	.info-name {
		font-size: 20rpx;
		/* font-weight: 500; */
		color: #5F6E95;
		line-height: 44rpx;
		margin-left: 2rpx;
	}
	
	/* .info-name::after {
		content: ";";
	} */
	.comment-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 23rpx;
		margin: 0 30rpx;
		border-bottom: 1rpx solid #F5F5F5;
		padding: 15rpx 0rpx;
	}
	
	/* 评论 */
	.comment-icon {
		width: 65rpx;
		height: 65rpx;
		flex-shrink: 0;
	}
	
	.comment-img {
		width: 100%;
		height: 100%;
	}
	
	.comment-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex-wrap: nowrap;
		margin-left: 15rpx;
	}
	.comment-info .reply_tip {
		color: #000000;
	}
	
	.comment-name {
		font-size: 24rpx;
		color:rgba(95,110,149,1);
	}
	
	.comment-text {
		padding-top: 5rpx;
		display: flex;
		text-align:justify;
		font-size: 24rpx;
		color:rgba(51,51,51,1);
		flex-wrap: wrap;
	}

	.comment {
		overflow: hidden;
	}

	.conment-btn {
		width: 685rpx;
		height: 75rpx;
		background: #F5F6F9;
		border-radius: 10rpx;
		margin: 18rpx auto;
		font-size:26rpx;
		/* font-weight:500; */
		color:rgba(153,153,153,1);
		line-height:75rpx;
		padding-left: 26rpx;
	}

	.publish {
		position: fixed;
		bottom: 250rpx;
		right: 12rpx;
		width: 80rpx;
		height: 80rpx;
	}

	.publish-img {
		width: 100%;
		height: 100%;
	}
	.prpup-box {
		width: 100%;
	}
	.btn {
		float: right;
		width: 200rpx;
		height: 75rpx;
		background-color: #007AFF;
		line-height: 75rpx;
		color: #FFFFFF;
	}
	
	
	.uni-popup__wrapper-box {
		overflow-y:visible!important;
	}
</style>
